<div class="r_crumbs">
  <a href="javascript:;">首页</a>
  <a href="javascript:;">系统管理</a>
  角色管理
</div>
<div class="r_main">
  <app-alert></app-alert>
  <div class="r_box">
    <div class="r_boxHead">
      <h2>角色</h2>
    </div>
    <div class="r_boxContent">
      <div class="r_boxTool clearfix">
        <div class="r_boxToolFl">
          <div class="row">
            <div class="col-md-4 col-sm-5 ">
              <div class="r_boxToolPad">
                <div class="input-group">
                  <div class="form-control pull-right" style="border: none;background: #f0f7fd;"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="r_boxToolFRl">
          <button type="button" data-toggle="modal" data-target="#myModal" class="btn btn-primary"
                  (click)="onAddRole()"><i class="fa fa-plus"></i> 新增
          </button>
        </div>
      </div>
      <div>
        <div class="r_boxPad">
          <div class="table-responsive">
            <table class="table table-striped table-bordered table-hover">
              <thead>
              <tr>
                <th>排序</th>
                <th>角色姓名</th>
                <th>备注</th>
                <th>账号状态</th>
                <th>创建时间</th>
                <th width="180">操作</th>
              </tr>
              </thead>
              <tbody>
              <tr *ngFor="let item of addRole">
                <td>{{item.sort}}</td>
                <td>{{item.name}}</td>
                <td>{{item.remark}}</td>
                <td>
                  <app-cust-select dataType="accountStatus" viewType="readonly" [value]="item.status"></app-cust-select>
                </td>
                <td>{{item.createTime | date:'yyyy-MM-dd HH:mm:ss'}}</td>
                <td style="text-align: center;">
                  <div class="tabledit-toolbar btn-toolbar" style=" display: inline-block;">
                    <div class="btn-group btn-group-sm">
                      <button class="tabledit-edit-button btn btn-sm btn-default" type="button"
                              (click)="onEditRole(item)">编辑
                      </button>
                      <button class="tabledit-delete-button btn btn-sm btn-default" type="button"
                              (click)="onDeleteRole(item)">删除
                      </button>
                      <button class="tabledit-delete-button btn btn-sm btn-default" type="button"
                              (click)="onSelPower(item)">分配权限
                      </button>
                    </div>
                  </div>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
        <app-pagination [currentPage]="curPage" [totalPages]="addRolePage?.totalPages"
                        (clickPage)="onPage($event)"></app-pagination>
      </div>
    </div>
  </div>
</div>
<!-- 新增/编辑 -->
<div id="data_editor" class="modal fade" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"
                                                                                          (click)="searchRole()">&times;</span>
        </button>
        <h4 class="modal-title">{{editorTitle}}</h4>
      </div>
      <div class="modal-body form-horizontal">
        <div class="form-group">
          <label class="col-sm-3 control-label">角色名称:</label>
          <div class="col-sm-9">
            <input type="text" class="form-control" id="inputEmail3" placeholder="角色名称" [(ngModel)]="curaddRole.name">
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-3 control-label">备注:</label>
          <div class="col-sm-9">
            <input type="text" class="form-control" placeholder="备注" [(ngModel)]="curaddRole.remark">
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-3 control-label">排序:</label>
          <div class="col-sm-9">
            <input type="text" class="form-control" placeholder="排序" [(ngModel)]="curaddRole.sort">
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" (click)="save()">保存</button>
        <button type="button" class="btn btn-default" data-dismiss="modal" (click)="searchRole()">取消</button>
      </div>
    </div>
  </div>
</div>
<!-- 删除 -->
<div id="delete_confirm" class="modal fade  bs-example-modal-lg" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
          aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">是否确定删除该信息?</h4>
      </div>
      <div class="modal-body">
        <div class="table-responsive">
          <table class="table table-bordered">
            <thead>
            <tr>
              <th>角色姓名</th>
              <th>备注</th>
              <th>排序</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>{{curaddRole.name}}</td>
              <td>{{curaddRole.remark}}</td>
              <td>{{curaddRole.sort}}</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="modal-footer" style="text-align: right;">
        <button type="button" class="btn btn-primary" (click)="delete()">确定</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
      </div>
    </div>
  </div>
</div>

<!--分配权限弹框-->
<div id="sel_power" class="modal fade" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"
                                                                                          (click)="searchRole()">&times;</span>
        </button>
        <h4 class="modal-title">{{editorTitle}}</h4>
      </div>
      <div class="modal-body form-horizontal">
        <div class="form-group">
          <div class="col-md-4 col-md-offset-4" style="padding: 0">
            <div id="selectBox_allo">
              <ul class="selectBox_ul">
                <li *ngFor="let group of authority"><input type="checkbox" value="{{group.id}}"
                                                           [checked]="group.active" (click)="selCheckA(group)">{{group?.name}}
                  <ul style="margin-top: 5px;margin-bottom: 5px">
                    <li *ngFor="let router of group?.childUserTreeTo" style="padding-left: 4px"><input type="checkbox"
                                                                                                       value="{{router.id}}"
                                                                                                       [checked]="router.active"
                                                                                                       (click)="selCheckB(router)">{{router?.name}}
                    </li>
                  </ul>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" (click)="saveAllPower()">保存</button>
        <button type="button" class="btn btn-default" data-dismiss="modal" (click)="searchRole()">取消</button>
      </div>
    </div>
  </div>
</div>
